<template>
  <div class="homeBox">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="../../assets/image/home/topBg_1.png" alt=""></van-swipe-item>
      <van-swipe-item><img src="../../assets/image/home/topBg_2.png" alt=""></van-swipe-item>
      <van-swipe-item><img src="../../assets/image/home/topBg_3.png" alt=""></van-swipe-item>
    </van-swipe>

    <!-- 选择信息 -->
    <tabList> </tabList>
    <!-- 底部导航栏 -->
    <bottomNav :routerName="route.name"> </bottomNav>
  </div>
</template>

<script setup>
import { ref } from "vue";
import bottomNav from "@/components/bottomNav/index.vue";
import tabList from "@/components/tabList/index.vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
</script>

<style lang="scss" scoped>
.homeBox {
  height: 100vh !important;
  margin: 0;
  background: no-repeat;
  // background-image: url(../../assets/image/home/topBg.png);
  ::v-deep .van-swipe {
    z-index: -1;
    width: 100%;
    .van-swipe-item {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .van-swipe__indicators {
      bottom: 50px;
      .van-swipe__indicator {
        width: 14px;
        height: 4px;
        border-radius: 88px;
      }
    }
  }
  .tabList {
    margin-top: -80px;
  }
}
</style>
